<template>
	
	<view class="container">
		<view class="box" :style="getStyle()">
			<view class="line"
			v-for="(item,index) in vdata"
			:key="index"
			:style="{
				transform:`translateY(-${parseInt((item==='.'?10:item)* parseInt(getStyle().height)) }px)`,
				transition:` all ${delay}ms`
			}"
			>
				<view v-for="(char,index2) in config.charList" :key="index2">{{char}}</view>
			</view>
		</view>
	</view>
	
</template>

<script setup lang="ts">
	import { computed, reactive, watch } from 'vue'
	import { rpxTopx } from '../../lib/ts/util';
	
	
	const emit = defineEmits(['update:modelValue'])
	
	let props = defineProps({
		modelValue:{ //绑定值
			type:Number,
			default:0
		},
		delay:{ //过渡时间，单位ms
			type:Number,
			default:1000
		},
		color:{
			type:String,
			default:'#333'
		},
		fontSize:{
			type:String,
			default:'28rpx'
		},
		letterSpacing:{
			type:[String,Number],
			default:'0rpx'
		},
		fontWeight:{
			type:Number,
			default:400
		}
	})
	
	//配置信息
	const config = reactive({
		charList:[0,1,2,3,4,5,6,7,8,9,'.']
	})
	
	
	//原始数据
	const value = computed({
	  get() {
		return props.modelValue
	  },
	  set(value) {
		emit('update:modelValue', value)
	  }
	})
	
	
	//渲染数据
	const vdata = computed(()=>{
		let str =  props.modelValue +''
		return str.split('')
	})
	
	const getStyle = ()=>{
		 //转为px处理误差
		let fonSize = rpxTopx(parseInt(props.fontSize)) 
		let obj = {
			fontSize:fonSize+'px',
			letterSpacing:props.letterSpacing || 0,
			fontWeight:props.fontWeight,
		}
		if(props.color) obj.color =  props.color
		obj.height = obj.lineHeight = fonSize + fonSize/2 +'px'
		return obj
	}
	
	
	
	
</script>

<style scoped lang="scss">
	.container{
		display: inline-block;
	}
	.box{
		display: inline-flex;
		align-items: flex-start;
		overflow: hidden;
	}
</style>